<template>
  <!-- 添加或修改抄房间仪表对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="960px" append-to-body >
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="form-flex">
      <el-row :gutter="20">
        <el-col :span="10" :xs="24">
          <el-form-item label="房间仪表" prop="rometerId">
            <el-input v-model="form.rometerName" class="input-with-select" readonly v-if="type == 'ADD'">
              <el-button slot="append" icon="el-icon-search" @click="() => this.$refs.rometerRef.show()"></el-button>
            </el-input>
            <el-input v-else v-model="form.rometerName" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="客户" prop="ownerName">
            <el-input v-model="form.ownerName" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="读数日期" prop="readingTime">
            <el-date-picker clearable size="small"
              v-model="form.readingTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择读数日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="本次读数" prop="theReading">
            <el-input-number v-model="form.theReading" :precision="4" :step="10" :min="0" style="width: 100%" @change="theReadingChange()"></el-input-number>
          </el-form-item>
        </el-col>
<!--        <el-col :span="8" :xs="24">-->
<!--          <el-form-item label="是否回程" prop="isClean">-->
<!--            <el-select v-model="form.isClean" placeholder="请选择是否回程" clearable   disabled>-->
<!--              <el-option-->
<!--                v-for="dict in dict.sys_yes_no"-->
<!--                :key="dict.dictValue"-->
<!--                :label="dict.dictLabel"-->
<!--                :value="dict.dictValue"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="8" :xs="24">
          <el-form-item label="上次读数日期" prop="lastTime">
            <el-date-picker clearable size="small" :disabled="true"
              v-model="form.lastTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择上次读数日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="上次读数" prop="lastReading">
            <el-input-number v-model="form.lastReading" :disabled="true" :precision="4" :step="10" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="实际行读" prop="practicalLine">
            <el-input-number v-model="form.practicalLine" :disabled="true" :precision="4" :step="10" :min="0" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="8" :xs="24">
          <el-form-item label="调整行度" prop="adjustLine">
            <el-input-number v-model="form.adjustLine" :precision="2" :step="10" style="width: 100%"></el-input-number>
          </el-form-item>
        </el-col>
<!--        <el-col :span="8" :xs="24">-->
<!--          <el-form-item label="计费行度" prop="chargedLine">-->
<!--            <el-input-number v-model="form.chargedLine" :disabled="true" :precision="4" :step="10" style="width: 100%"></el-input-number>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
        <el-col :span="17" :xs="24">
          <el-form-item label="抄表说明" prop="readerExplain">
            <el-input v-model="form.readerExplain" type="textarea" placeholder="请输入抄表说明"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
          <span style="margin-right: 30px;">
          <span style="font-size: 18px;color: red;">本次计费行度：</span>
          <span style="font-size: 20px;color: red;font-weight: 600;">{{form.chargedLine}}</span>
        </span>
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

    <TableSelect
      ref="rometerRef"
      :listColumns="rometerColumns"
      gridUrl="/payfee/meter/list"
      @rowClick="rometerSelect"
      title="仪表字典"
      :defaultParam="{nodeId: this.node}"/>

  </el-dialog>
</template>

<script>
  import { getCopyroom,addCopyroom, updateCopyroom,lastRoomReading} from "@/api/payfee/copyroom";
  import {listMeter } from "@/api/payfee/meter";
  import {getRoom} from "@/api/property/room"

  export default {
    name: "copyRoomform",
    dicts:[ 'sys_yes_no' ],
    data() {
      return {
        title:'',
        open: false,
        disabled: false,
        check: '',
        form:{},
        // 表单校验
        rules: {
          rometerId: [
            {required: true, message: "房间仪表不能为空", trigger: "blur"}
          ],
          ownerId: [
            {required: true, message: "客户不能为空", trigger: "blur"}
          ],
          theReading: [
            {required: true, message: "本次读数不能为空", trigger: "blur"}
          ],
        },
        rometerColumns: [
          {title: '业主姓名', key: 'customName', type: '', width: '', isSearch: true},
          {title: '仪表种类', key: 'kindName', type: '', width: '', isSearch: true},
          {title: '楼栋', key: 'floorName', type: '', width: '', isSearch: true},
          {title: '房间', key: 'roomName', type: '', width: '', isSearch: false},
        ],
        type:null,
        node:null,
      }
    },
    watch: {
      'form.roomId'(v) {
        this.getOwnerList();
      },
      //调整行度
      'form.adjustLine'(v) {
        if (this.form.adjustLine >= 0) {
          //计费行度 = 实际行读 + 调整行度
          this.form.chargedLine = this.form.practicalLine + this.form.adjustLine
        } else if (this.form.adjustLine <= 0) {
          //计费行度 = 实际行读 + 调整行度
          this.form.chargedLine = (this.form.practicalLine) + (this.form.adjustLine)
        }
      }
    },
    methods: {
      theReadingChange(){
        if (this.form.theReading < this.form.lastReading){
          this.$confirm("本次读数小于上次读数是否回程", "警告", {
            confirmButtonText: "是",
            cancelButtonText: "否",
            type: "warning"
          }).then(() => {
            this.isCleanType('Y')
          }).catch(() => {
            this.isCleanType('N')
          })
        }else {
          this.isCleanType('N')
          //实际行读 = 本次读数-上次读数
          this.form.practicalLine = this.form.theReading - this.form.lastReading
          //计费行度 = 本次读数-上次读数
          this.form.chargedLine = this.form.theReading - this.form.lastReading
        }
      },
      isCleanType(v){
        this.form.isClean=v
        if (this.form.isClean === 'Y') {
          //实际行读 = （回程 - 上次度数） + 这次度数
          this.form.practicalLine = (this.form.ticket - this.form.lastReading) + this.form.theReading
          //计费行度 = （回程 - 上次度数） + 这次度数
          this.form.chargedLine = (this.form.ticket - this.form.lastReading) + this.form.theReading
        } else {
          //实际行读 = 本次读数-上次读数
          this.form.practicalLine = this.form.theReading - this.form.lastReading
          //计费行度 = 本次读数-上次读数
          this.form.chargedLine = this.form.theReading - this.form.lastReading
        }
      },
      show(option){
        this.type = option.type
        this.reset();
        this.disabled = option.type == 'VIEW'
        this.node=option.currentNode.id
        if (option.type == 'ADD') {
          this.open = true;
          this.title = "新增抄表记录";
          //检查左边树节点是否是房屋
          this.getRoomMeterInfo(option.currentNode);
          this.form.readingTime = this.$utils.toDateString(new Date(), 'yyyy-MM-dd')
        } else if (option.type == 'UPDATE' || option.type == 'VIEW') {
          this.node = option.id
          getCopyroom(option.id).then(response => {
            this.form = response.data;
            this.form.rometerName = `${this.form.roomName}[${this.form.kindName}]`
            if (option.type == 'VIEW') {
              this.title = "查看抄表记录";
            } else {
              this.title = "修改抄表记录";
            }
            this.open = true;
          });
        }
      },
      getRoomMeterInfo(currentNode){
        if (currentNode && currentNode.modelType == 'room') {
          listMeter({roomId: currentNode.id}).then(res => {
            if (res.rows.length > 0) {
              let row = res.rows[0]
              this.form.rometerId = row.rometerId
              this.form.rometerName = `${row.roomName}[${row.kindName}]`
              this.form.roomId = row.roomId
              this.form.ownerId = row.ownerId
              this.lastNumericalReading()
            }
          })
        }
      },
      rometerSelect(index, row) {
        this.form.rometerName = `${row.roomName}[${row.kindName}]`;
        this.form.rometerId = row.rometerId;
        this.form.roomId = row.roomId;
        this.form.ownerId = row.ownerId;
        this.lastNumericalReading();
      },
      lastNumericalReading() {
        if (this.form.rometerId) {
          lastRoomReading( this.form.rometerId).then(res => {
            console.log(res.data)
            this.form.lastTime = res.data.lastTime //上一次读取时间
            this.form.lastReading = res.data.lastReading //上一次读数
            this.form.kindId = res.data.kindId //上一次读数
            this.form.ticket = res.data.ticket //回程
          })
        }
      },
      getOwnerList() {
        if (this.form.roomId) {
          getRoom(this.form.roomId).then(res => {
            this.form.ownerId = res.data.ownerId
            this.form.ownerName = res.data.customName
          })
        }
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          copyId: null,
          rometerId: null,
          ownerId: null,
          lastTime: null,
          lastReading: null,
          readingTime: null,
          theReading: null,
          practicalLine: null,
          adjustLine: null,
          chargedLine: null,
          readerExplain: null,
          deptId: null,
          ancestors: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          rometerName: null,
          roomId: null,
          ownerName: null,
          kindId: null,
          ticket: null,
          isClean: null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.isClean != 'Y') {
              if ((this.form.theReading + this.form.lastReading) > this.form.ticket) {
                this.$message.error("两次读数相加大于回程，重新选择回程");
                this.form.theReading = 0;
                return
              }
            }
            if (this.form.chargedLine < 0) {
              this.$message.error("调整行度不能大于计费行度");
              return
            }
            if (this.form.readingTime <= this.form.lastTime) {
              this.$message.error("本次读数时间必须大于上次读数时间");
              return;
            }
            if (this.form.copyId != null) {
              updateCopyroom(this.form).then(response => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.cancel();
                this.$emit("ok")
              });
            } else {
              addCopyroom(this.form).then(response => {
                this.msgSuccess("新增成功");
                this.open = false;
                this.cancel();
                this.$emit("ok")
              });
            }
          }
        });
      },


    }
  }
</script>

<style>

</style>
